import { Button, Divider, message } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect } from 'umi'
import { getProtocolPage, saveAndUpdateProtocol, updateProtocolStatusById  } from '../service'
import CreateForm from './components/CreateForm'
import moment from 'moment'
import {trainingTypes, trainingSignedStatus} from "@/utils/constant";

const TableList = ({}) => {
  const actionRef = useRef();
  const [visible, setVisible] = useState(null);
  const [current, setCurrent] = useState(undefined);
  const [isUpdate, setIsUpdate] = useState(null);

  const columns = [
    {
      title: '序号',
      dataIndex: 'num',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
    },
    {
      title: '培训时间',
      key: 'trainingTime',
      dataIndex: 'trainingTime',
      valueType: 'dateRange',
      render: (text,record) => {
        return moment(record.trainingStartTime).format('YYYY-MM-DD')+ ' - ' +moment(record.trainingEndTime).format('YYYY-MM-DD')
      }
    },
    {
      title: '培训类型',
      dataIndex: 'trainingType',
      valueEnum: {
        0: { text: trainingTypes[0].label},
        1: { text: trainingTypes[1].label},
        2: { text: trainingTypes[2].label},
      },
    },
    {
      title: '人数',
      dataIndex: 'trainingNum',
      hideInSearch: true,
    },
    {
      title: '操作人',
      dataIndex: 'createName',
      hideInSearch: true,
    },
    {
      title: '操作日期',
      dataIndex: 'createTime',
      render: (text) => (text!=='-' && moment(text).format('YYYY-MM-DD')),
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      valueEnum: {
        0: { text: trainingSignedStatus[0].label, status: 'Default'},
        1: { text: trainingSignedStatus[1].label, status: 'Processing'},
        2: { text: trainingSignedStatus[2].label, status: 'Success'},
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          {
            record.status === 0 && <>
              <a onClick={() => showDetailOrEdit(record, true)}>修改</a>
              <Divider type="vertical"/>
              <a onClick={() => sendAgreement(record)}>发送协议签订</a>
              <Divider type="vertical"/></>
          }
          <a onClick={() => showDetailOrEdit(record, false)}>详情</a>
        </>
      ),
    },
  ];

  const showDetailOrEdit = (record,isUp) => {
    setIsUpdate(isUp);
    setCurrent(record);
    setVisible(true);
  };

  const sendAgreement = (record) => {
    updateProtocolStatusById(record.id).then(res => {
      if (res.flag){
        message.success('发送协议签订成功！')
      }else {
        message.error(res.error);
      }
      actionRef.current.reload();
    })
  };

  const handleModalVisible = (value) => {
    setCurrent(null);
    setVisible(value)
  };

  const handleSubmit = (values) => {
    saveAndUpdateProtocol(values).then(res => {
      if (res.flag){
        message.success('保存培训协议成功！');
      }else {
        message.error(res.error);
      }
      setVisible(false);
      actionRef.current.reload();
    })
  };

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        request={(params) => getProtocolPage(params,0)}
        columns={columns}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => showDetailOrEdit(null,true)}>
            <PlusOutlined/> 新建
          </Button>,
        ]}
      />
      <CreateForm
        isUpdate={isUpdate}
        current={current}
        visible={visible}
        onCancel={()=>handleModalVisible(false)}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
};

export default connect(({  }) => ({
}))(TableList)
